<template>
    <div class="todo-item">
      <input type="checkbox" v-model="allCompleted">
      <span>已办事项 {{ completedCount }}/全部事项 {{ total }}</span>
      <button @click="$emit('clear-completed')">清除已办</button>
      <button @click="$emit('clear-all')">清除所有</button>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  const props = defineProps({
    todos: {
      type: Array,
      required: true
    }
  })
  
  const emit = defineEmits(['update:modelValue'])
  
  // 计算属性
  const completedCount = computed(() => 
    props.todos.filter(t => t.completed).length
  )
  
  const total = computed(() => props.todos.length)
  
  const allCompleted = computed({
    get() {
      return props.todos.length > 0 && 
             props.todos.every(t => t.completed)
    },
    set(value) {
      emit('toggle-all', value)
    }
  })
  </script>
  
  <style scoped>
 /* 底部样式 */
.todo-item {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 40px;
  list-style: none;
  border-bottom: 1px solid #eee;
  background-color: lightblue;
}
.todo-item span,
.todo-item input[type='text'] {
  flex: 1;
  margin: 0 20px;
}
.todo-item button {
  padding: 0 10px;
}
  </style>